<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--1.设置移动端自适应-->
    <meta name="viewport" content="width= device-width initial-scale=1.0">
    <title>博客详情</title>
    <!--2.导入semantic UI CDN-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="static/css/me.css">
</head>
<body>

<!--建立导航-->
<nav class="ui inverted attached segment">
    <!--主页导航栏-->
    <div class="ui container me_padding_mini">
        <div class="ui inverted stackable menu">
            <!--建立网页导航-->
            <h2 class="ui teal header item">Leaf</h2>
            <a class="m-item item m-mobile-hide" href="#"><i class="icon home"></i>首页</a>
            <a class="m-item item m-mobile-hide" href="#"><i class="icon idea"></i>分类</a>
            <a class="m-item item m-mobile-hide" href="#"><i class="icon tags"></i>标签</a>
            <a class="m-item item m-mobile-hide" href="#"><i class="info icon"></i>关于我</a>
            <a class="m-item item m-mobile-hide" href="#"><i class="clone icon"></i>归档</a>

            <!--建立一个搜索框-->
            <div class="right item m-mobile-hide">
                <div class="ui transparent inverted icon input">
                    <input type="text" placeholder="Search...">
                    <i class="search icon link"></i>
                </div>
            </div>
        </div>
    </div>
    <a href="#" class="ui menu toggle black button icon m-top-right m-mobile-show" style="display: none">
        <i class="sidebar icon middle aligned"></i>
    </a>
</nav>

<!--中间内容-->
<div>
    <div class="ui container m-padding-medium">
        <div class="ui container m-container-small">
            <!--头部-->
            <div class="ui top attached segment">
                <div class="ui horizontal link list">
                    <div class="item">
                        <img src="https://picsum.photos/id/1/100/100?image=0" alt=""
                             class="ui avatar image">
                        <div class="content"><a href="#" class="header">Leaf</a></div>
                    </div>
                    <div class="item">
                        <i class="calendar icon"></i>2019-11-10
                    </div>
                    <div class="item">
                        <i class="eye icon"></i>8770
                    </div>
                </div>
            </div>
            <!--图片区域-->
            <div class="ui attached segment">
                <img src="https://picsum.photos/id/1/800/450?image=1005" alt="" class="ui image rounded fluid">
            </div>
            <!--主要内容区域-->
            <div class="ui segment attached">
                <div class="ui segment">
                    <div class="ui label basic orange">原创</div>

                    <!--文章标题-->
                    <h2 class="ui header centered">关于刻意练习的清单</h2>
                    <br>
                    <!--文章内容-->
                    <div id="content" class="m-font-size-middle m-padding-side-responsive" style="text-align: left">
                        <p>
                            1.不论在什么行业或领域，提高技能与能力的最有效方法全都遵循一系列普遍原则，就是刻意练习。成为任何领域高手的关键因素不是文化，不是艺术，不是哲学，不是制度，不是自虐，而是刻意练习。</p>

                        <p> 2.关于刻意练习，被误读最久的一个概念是“一万小时定律”。事实上，想把自己变成高手，光知道“一万小时”毫无意义，因为真正的关键根本不在训练时间，而是训练的方法。</p>

                        <p> 3.功夫就在功夫上，“功夫在诗外”就是一句谎言。技能是人脑中的一种硬件结构，是“长”在人脑中的。要高度针对性地重复练习基本功，想要学什么功夫，就应该练什么功夫。</p>

                        <p>
                            4.心理学家把人的知识和技能分为层层嵌套的三个圆形区域：最内一层是“舒适区”，是我们已经熟练掌握的各种技能；最外一层是“恐慌区”，是我们暂时无法学会的技能；二者中间则是“学习区”。</p>

                        <p>
                            5.在“舒适区”做事，叫生活；在“学习区”做事，才叫练习。有效的练习必须发生在“学习区”，一旦你学会了某个东西，就不该在上面继续花时间，要立即转入下一个难度。凡是达到“我闭着眼睛都能……”这个程度的人都废了，高手不会闭着眼睛做事。</p>

                        <p>
                            6.只有结果可控的领域，刻意练习才有用。股市是不可控的，所以刻意练习预测股市很可能就没用。有严格固定规则的领域，练习的作用最大，比如国际象棋；没有严格规则的领域，练习的作用则非常有限，如编程、航空飞行、广告创意。</p>

                        <p>
                            7.把要训练的内容分成有针对性的小块，对每一个小块进行重复练习。艺术家要采风，棋手要打谱，律师要学案例，政客要读历史，科学家要看论文。宁可定期坚持发几篇灌水小文章，也比苦读10年期待一鸣惊人强。</p>

                        <p>
                            8.刻意练习的关键是随时获得有效的反馈。你需要一个旁观者，他不见得水平比你高，不需要经常跟你谈心，不用激发你的战斗热情，但他必须给你提供三步反馈：演示一遍正确动作，表现一遍错误动作，再演示一遍正确动作。</p>

                        <p>9. 有效的反馈，应该满足三个条件： 及时，一旦不对马上就有人给你指出来；超脱，对事不对人，反馈者不把你的错误上升到“你这个人行不行”的层面；试错，你犯错误的代价很小。</p>

                        <p>10. 考试是最好的反馈。熟悉并不等于理解，想要真正理解，唯一的办法是考试和测验。没有经过测验，你的知识只是幻觉。</p>

                        <p>
                            11.
                            学习时间长不等于用功，决定性因素不是学习时间，而是学习环境。刻意练习不好玩，如果你在打打闹闹中享受练习的过程，那就不是刻意练习。你必须在一个不受打扰的环境中单独学习，调动大量的身体和精神资源，全力投入。特别专注地干一件事才是最酷的。</p>

                        <p>
                            12.
                            刻意练习最为关键的一点，是敢于迈出从舒适区往外走的那一步。你不但应该在“学习区”刻意练习，你的研究、工作和娱乐都应该在“学习区”。刻意练习可以使几乎任何人在大多数领域成为高手，如果能更早知道这一点，你在奋斗路上也许可以节省更多时间和精力。</p>
                    </div>
                    <!--标签-->
                    <div class="ui  basic teal left pointing label m-margin-middle">方法论</div>

                    <!--赞赏-->
                    <div class="ui center aligned segment basic">
                        <button class="ui basic orange circular button" id="payButton">赞赏</button>
                    </div>

                    <div class="ui payQR flowing popup transition hidden">
                        <div class="ui orange label basic">
                            <div class="ui images">
                                <div class="image">
                                    <img src="./static/image/me.jpeg" alt="" class="ui rounded bordered image"
                                         style="width: 200px">
                                    <div style="font-size: 14px !important;">微信</div>
                                </div>
                                <div class="image">
                                    <img src="./static/image/me.jpeg" alt="" class="ui rounded bordered image"
                                         style="width: 200px">
                                    <div style="font-size: 14px !important;">支付宝</div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                <!--博客信息说明-->
                <div class="ui message attached positive">
                    <div class="ui grid">
                        <div class="ui eleven wide column middle aligned">
                            <ul class="list">
                                <li>作者：leaf</li>
                                <li>发表时间：</li>
                                <li>版权声明：</li>
                                <li>公众号转载：</li>
                            </ul>
                        </div>
                        <div class="ui five wide column rounded">
                            <img src="./static/image/me.jpeg" alt="" class="ui image right floated"
                                 style="width: 110px;">
                        </div>
                    </div>
                </div>
                <!-- 留言区域 -->
                <div class="ui bottom segment attached">
                    <div class="ui threaded comments">
                        <h3 class="ui dividing header">Comments</h3>
                        <div class="comment">
                            <a class="avatar">
                                <img src="https://picsum.photos/id/1/800/450?image=1003">
                            </a>
                            <div class="content">
                                <a class="author">Matt</a>
                                <div class="metadata">
                                    <span class="date">Today at 5:42PM</span>
                                </div>
                                <div class="text">
                                    How artistic!
                                </div>
                                <div class="actions">
                                    <a class="reply">回复</a>
                                </div>
                            </div>
                        </div>
                        <div class="comment">
                            <a class="avatar">
                                <img src="https://picsum.photos/id/1/800/450?image=1002">
                            </a>
                            <div class="content">
                                <a class="author">Elliot Fu</a>
                                <div class="metadata">
                                    <span class="date">Yesterday at 12:30AM</span>
                                </div>
                                <div class="text">
                                    <p>This has been very useful for my research. Thanks as well!</p>
                                </div>
                                <div class="actions">
                                    <a class="reply">回复</a>
                                </div>
                            </div>
                            <div class="comments">
                                <div class="comment">
                                    <a class="avatar">
                                        <img src="https://picsum.photos/id/1/800/450?image=1001">
                                    </a>
                                    <div class="content">
                                        <a class="author">Jenny Hess</a>
                                        <div class="metadata">
                                            <span class="date">Just now</span>
                                        </div>
                                        <div class="text">
                                            Elliot you are always so right :)
                                        </div>
                                        <div class="actions">
                                            <a class="reply">回复</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="comment">
                            <a class="avatar">
                                <img src="https://picsum.photos/id/1/800/450?image=1008">
                            </a>
                            <div class="content">
                                <a class="author">Joe Henderson</a>
                                <div class="metadata">
                                    <span class="date">5 days ago</span>
                                </div>
                                <div class="text">
                                    Dude, this is awesome. Thanks so much
                                </div>
                                <div class="actions">
                                    <a class="reply">回复</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="ui form">
                        <div class="field">
                            <textarea name="content" placeholder="请输入评论信息..."></textarea>
                        </div>
                        <div class="fields">
                            <div class="field  m-mobile-wide m-mobile-margin-middle">
                                <div class="ui left icon input">
                                    <i class="ui user icon"></i><input type="text" name="nickname" placeholder="姓名">
                                </div>
                            </div>
                            <div class="field  m-mobile-wide m-mobile-margin-middle">
                                <div class="ui left icon input">
                                    <i class="ui icon mail"></i><input type="text" name="email" placeholder="邮箱">
                                </div>
                            </div>
                            <div class="field  m-mobile-wide m-mobile-margin-middle">
                                <button class="ui teal button m-mobile-wide"><i class="ui icon edit"></i>发布</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<!--底部 footer-->
<footer class="ui inverted attached segment m-padding-big">
    <div class="container ui center aligned ">
        <!--使用栅格系统-->
        <div class="ui  inverted divided grid">
            <div class="three wide column"><img src="./static/image/me.jpeg" class="ui rounded image" alt=""
                                                style="width: 110px"></div>
            <div class="three wide column">
                <h4 class="ui inverted header">最新博客</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">用户故事</a>
                    <a href="#" class="item">用户体验</a>
                    <a href="#" class="item">练习清单</a>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header">最新博客</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">用户故事</a>
                    <a href="#" class="item">用户体验</a>
                    <a href="#" class="item">练习清单</a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header">联系我们</h4>
                <P class="m-opacity_mini">这是我的个人博客。会分享有关编程的相关信息，希望可以给到这里的人有所帮助</P>
            </div>
        </div>
        <div>
            <div class="ui inverted section divider"></div>
            <p class="m-opacity_mini">© 2019 Leaf. All Rights Reserved.</p>
        </div>
    </div>
</footer>

<!--3.导入Jquery CDN-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<!--2.导入semantic UI CDN-->
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<script>
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });
    $('#payButton').popup({
        popup: $('.payQR.popup'),
        on: 'click',
        position: 'bottom center'
    });
</script>

</body>
</html>